<template>
  <div>
    <div id="container" style="width: 100%; height: 800px"></div>
  </div>
</template>

<script setup>
import Highcharts from 'highcharts'
import HighchartsVue from 'highcharts-vue'
import stockInit from 'highcharts/modules/stock'
// 初始化Highcharts Stock模块
stockInit(Highcharts)
;(async () => {
  // Load the dataset
  const colorTemplate = '{#ge point.open point.close}#ff6e6e{else}#51af7b{/ge}'
  const data = await fetch(
    'https://demo-live-data.highcharts.com/aapl-ohlcv.json',
  ).then((response) => response.json())

  // split the data set into ohlc and volume
  const ohlc = [],
    volume = [],
    dataLength = data.length

  for (let i = 0; i < dataLength; i += 1) {
    ohlc.push([
      data[i][0], // the date
      data[i][1], // open
      data[i][2], // high
      data[i][3], // low
      data[i][4], // close
    ])

    volume.push([
      data[i][0], // the date
      data[i][5],
      data[i][1] < data[i][4] ? 'highcharts-point-up' : 'highcharts-point-down', // the volume
    ])
  }

  console.log('ohlc:', ohlc, 'volume:', volume)

  Highcharts.stockChart('container', {
    accessibility: {
      enabled: false,
    },
    lang: {
      accessibility: {
        defaultChartTitle: 'AAPL Stock Price',
      },
    },
    xAxis: {
      crosshair: {
        className: 'highcharts-crosshair-custom',
        enabled: true,
      },
    },
    yAxis: [
      {
        title: {
          text: 'price (USD)',
        },
        crosshair: {
          snap: false,
          className: 'highcharts-crosshair-custom',
          label: {
            className: 'highcharts-crosshair-custom-label',
            enabled: true,
            format: '{value:.2f}',
          },
          enabled: true,
        },
        labels: {
          align: 'left',
        },
        height: '70%',
      },
      {
        title: {
          text: 'volume',
        },
        crosshair: {
          className: 'highcharts-crosshair-custom',
          snap: false,
          enabled: true,
          label: {
            format:
              '{#if value ge 1000000} {(divide value 1000000):.2f} ' +
              'M {else} {value} {/if}',
            className: 'highcharts-crosshair-custom-label',
            enabled: true,
          },
        },
        labels: {
          align: 'left',
        },
        top: '70%',
        height: '30%',
        offset: 0,
      },
    ],
    chart: {
      styledMode: true, // css样式自定义
    },
    tooltip: {
      shape: 'square',
      split: false,
      shared: true,
      headerShape: 'callout',
      shadow: false,
      format: `<span style="font-size: 1.4em">{point.series.name}</span>
O<span style="color:${colorTemplate}";>{point.open}</span>
H<span style="color:${colorTemplate}";>{point.high}</span>
L<span style="color:${colorTemplate}";>{point.low}</span>
C<span style="color:${colorTemplate}";>{point.close}
{(subtract point.open point.close):.2f}
{(multiply (divide (subtract point.open point.close) point.close) 100):.2f}%
</span>
<br>
Volume<span style="color:${colorTemplate}";>{points.1.y}</span>`,
      positioner: () => ({ x: 60, y: 0 }),
    },
    series: [
      {
        type: 'candlestick',
        id: 'aapl-ohlc',
        name: 'AAPL Stock Price',
        lastPrice: {
          enabled: true,
          label: {
            enabled: true,
            align: 'left',
            x: 8,
          },
        },
        data: ohlc,
      },
      {
        type: 'column',
        lastPrice: {
          enabled: true,
          label: {
            format:
              '{#if value ge 1000000} ' +
              '{(divide value 1000000):.2f} M {else} {value} {/if}',
            enabled: true,
            align: 'left',
            x: 8,
          },
        },
        keys: ['x', 'y', 'className'],
        id: 'aapl-volume',
        name: 'AAPL Volume',
        data: volume,
        yAxis: 1,
      },
    ],
    rangeSelector: {
      verticalAlign: 'bottom',
    },
    responsive: {
      rules: [
        {
          condition: {
            maxWidth: 800,
          },
          chartOptions: {
            rangeSelector: {
              inputEnabled: false,
            },
          },
        },
      ],
    },
  })
})()
</script>

<style lang="scss" scoped>
@import url('https://code.highcharts.com/css/annotations/popup.css');
@import url('https://code.highcharts.com/css/stocktools/gui.css');
@import url('https://code.highcharts.com/css/highcharts.css');

:root {
  --highcharts-background-color: #19191b;
  --highcharts-color-1: #9689e6;
}

:deep(.highcharts-background) {
  fill: #19191b;
}

:deep(.highcharts-figure) {
  margin: 0;
}

:deep(.highcharts-candlestick-series .highcharts-point) {
  stroke-width: 1px;
}

:deep(.highcharts-point-down) {
  fill: #ff4242;
  stroke: #ff4242;
}

:deep(.highcharts-candlestick-series .highcharts-point-down) {
  fill: #ff4242;
  stroke: #ff4242;
}

:deep(.highcharts-candlestick-series .highcharts-point-up) {
  fill: #51af7b;
  stroke: #51af7b;
}

:deep(.highcharts-point-up) {
  fill: #51af7b;
  stroke: #51af7b;
}

:deep(.highcharts-crosshair-label text) {
  font-size: 1em;
}

:deep(.highcharts-grid-line) {
  stroke: black;
}

:deep(.highcharts-crosshair) {
  stroke-width: 1px;
  stroke-dasharray: 1;
}

:deep(.highcharts-crosshair-custom) {
  stroke: white;
  stroke-width: 1px;
  stroke-dasharray: 4;
}

:deep(.highcharts-popup > button) {
  filter: invert(1);
  background-color: var(--highcharts-neutral-color-80);
}

:deep(.highcharts-menu-item-btn) {
  filter: invert(1);
}

:deep(
    .highcharts-bindings-wrapper .highcharts-submenu-wrapper,
    .highcharts-label-annotation > .highcharts-submenu-wrapper
  ) {
  background-color: #19191b;
}

:deep(.highcharts-bindings-wrapper li > span.highcharts-menu-item-btn:hover) {
  background-color: var(--highcharts-neutral-color-60);
}

:deep(.highcharts-popup select, .highcharts-popup input) {
  background-color: #1e222d;
  color: var(--highcharts-neutral-color-80);
}

:deep(
    .highcharts-bindings-wrapper
      li.highcharts-active
      > span.highcharts-menu-item-btn
  ) {
  background-color: var(--highcharts-neutral-color-40);
}

:deep(.highcharts-axis-title) {
  visibility: hidden;
}

:deep(
    .highcharts-popup > .highcharts-popup-close:hover,
    .highcharts-popup button.highcharts-annotation-edit-button:hover,
    .highcharts-popup button.highcharts-annotation-remove-button:hover,
    .highcharts-popup > button:hover
  ) {
  filter: invert(1);
  background-color: var(--highcharts-neutral-color-100);
}

:deep(
    .highcharts-popup > .highcharts-popup-close,
    div.highcharts-popup-bottom-row > button
  ) {
  margin-right: 3px;
  background-color: var(--highcharts-neutral-color-80);
  filter: invert(1);
}

:deep(button.highcharts-indicator-list-item) {
  color: var(--highcharts-neutral-color-80);
}

:deep(
    div.highcharts-popup.highcharts-no-tooltip
      > button.highcharts-tab-item.highcharts-tab-item-active
  ) {
  background-color: var(--highcharts-neutral-color-80);
}

:deep(
    div.highcharts-popup.highcharts-no-tooltip
      > button.highcharts-tab-item.highcharts-tab-item-disabled
  ) {
  background-color: var(--highcharts-neutral-color-60);
}

:deep(button.highcharts-menu-item-btn:hover) {
  background-color: var(--highcharts-neutral-color-100);
}

:deep(button.highcharts-menu-item-btn-disabled) {
  background-color: var(--highcharts-neutral-color-80);
}

:deep(button.highcharts-menu-item-btn-active) {
  background-color: var(--highcharts-neutral-color-60);
}

:deep(.highcharts-bindings-wrapper .highcharts-submenu-wrapper) {
  background-color: var(--highcharts-background-color);
}

:deep(.highcharts-description) {
  margin: 0.3rem 10px;
}

:deep(text.highcharts-credits) {
  display: none;
}

:deep(.highcharts-axis-labels) {
  font-size: 20px;
  fill: #7c7c7c;
}

:deep(.highcharts-label) {
  font-size: 20px;
}

:deep(.highcharts-no-tooltip) {
  font-size: 20px;
  fill: #7c7c7c;
}

:deep(.highcharts-axis) {
  font-size: 50px;
  fill: #7c7c7c;
}
</style>
